<template>
<div class="login-container">
    <div class="title">系统登录</div>
    <el-form :model="formData" ref="formRef" :rules="rules">
        <el-form-item prop="account">
            <el-input  v-model="formData.account" style="width: 400px" placeholder="请输入用户名">
                <template #prefix>
                    <i class="iconfont icon-zhanghao"></i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="formData.password" style="width: 400px" placeholder="请输入密码" show-password>
                <template #prefix>
                    <i class="iconfont icon-suo"></i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 400px" @click="handleLogin">立即登录</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { login } from '@/api/account'
import { useRouter } from 'vue-router'
import { ElMessage} from 'element-plus'
import formRules from '@/utils/formRules'
import {useUserStore} from '@/store/modules/user'
const userStore = useUserStore()
const formRef = ref(null)
const router = useRouter()
// 表单数据
const formData = reactive({
    account: '',
    password: ''
})
const rules = reactive({
    account:[
        {required:true,message:'请输入账号',trigger:'blur'},
        {min:3,max:10,message:'账号长度在3-10之间',trigger:'blur'},
    ],
    password: [
        {required:true,message:'请输入账号',trigger:'blur'},
        {min:3,max:10,message:'账号长度在3-10之间',trigger:'blur'},
    ]
})

// 登录处理函数
const handleLogin = async () => {
    formRef.value.validate(async res =>{
        if(res){
            let {code, msg, id, token} = await login(formData);
            userStore.setUserId(id)
            userStore.setToken(token)
            if(code == 0){
                userStore.setToken(token)
                ElMessage.success(msg)
                router.push('/home')
            }else{
                ElMessage.error(msg)
            }
        }
    })
    
    
    
}
</script>

<style scoped>
.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #2c3e50;
    color: white;
}

.title {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 600;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border-radius: 5px;
}

.form-item {
    display: flex;
    align-items: center;
}

.icon-user::before {
    content: '\f007';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    margin-right: 10px;
}

.icon-lock::before {
    content: '\f023';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    margin-right: 10px;
}

.input-field {
    flex: 1;
    padding: 8px;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    background-color: #ecf0f1;
}

.login-button {
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #2980b9;
}
:deep(.el-input__wrapper){
    background-color: rgba(0, 0, 0, 0);
}
:deep(.el-form-item){
    margin: 20px 0;
}
:deep(.el-input__inner){
    color: #fff;
}
</style>